<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleFetch">ajax-fetch</button>
    </div>

    <script type="text/javascript">
        new Vue ({
            el:"#box",
            data: {
                list:[]
            },
            methods:{
                handleFetch () {
                    // console.log("fetch")
                    //向服务器发送请求
                    fetch("json/text.json")
                    .then(res=>{
                        console.log(res) //可以拿到状态码中的部分响应头
                        return res.json() //继续return，res.json方法将可读流转换成Promise对象。
                    })
                    .then(res=>{    //上一步的return执行成功后将执行此步骤，并拿到真正的res
                        // 注：res.text()为字符串； res.json（）为json对象

                    })

                }
            }
        })

        // fetch  post请求
        // fetch("xxx", {
        //     headers: {
        //         method:'post',
        //         headers:{
        //             "Content-Type": "application/x-www-form-urlencode"
        //         },
                // body:"name=kerwin&age=100",  //在数据中的体现
                // credentials:"include" //需要携带coolie值时添加此字段
        //     }
        // }).then(res=>res.json()).then(res=>{console.log(res)});

        // post请求2
        // fetch("http://m.vip..........", {
        //     method:'post',
        //     headers: {
        //         "Content-Type": "application/json"   //配置格式
        //     },
        //     body: JSON.stringify({
        //         namee:"kerin",
        //         age: 100
        //     })
        // }).then(res => res.json() ).then(res => {console.log(res)} );
    </script>
</body>
</html>